<template>
    <header>
        <div class="icon-location-box">
            <div class="icon-location"></div>
        </div>
        <div class="location-text">天津大学北洋园校区<i class="fa fa-caret-down"></i></div>
    </header>
    <div class="search">
        <!-- 当滚动条超过上面的定位块时，search-fixed-top块变成固定在顶部。 -->
        <div class="search-fixed-top" id="fixedBox">
            <!-- 搜索框部分中间的白框 -->
            <div class="search-box">
                <i class="fa fa-search"></i>搜索饿了么商家、商品名称
            </div>
        </div>
    </div>

    <rollingAnnouncement></rollingAnnouncement>

    <!-- 点餐分类部分 -->
    
    <busssinessCategory></busssinessCategory>
    <!-- 横幅广告部分 -->
    <div class="banner">
        <h3>品质套餐</h3>
        <p>搭配齐全吃得好</p>
        <a>立即抢购 &gt;</a>
    </div>

    <VIPBanner></VIPBanner>
    <recommendedBussiness></recommendedBussiness>
    
</template>

<script setup>
import '@/assets/icon.css'
import VIPBanner from '@/components/VIPBanner.vue';
import rollingAnnouncement from '@/components/rollingAnnouncement.vue';
import recommendedBussiness from '@/components/recommendedBussiness.vue';
import busssinessCategory from '@/components/busssinessCategory.vue';
</script>

<style lang="scss" scoped>
header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;

    display: flex;
    align-items: center;

    .icon-location-box {
        width: 3.5vw;
        height: 3.5vw;
        margin: 0 1vw 0 3vw;
    }

    .location-text {
        font-size: 4.5vw;
        font-weight: 700;
        color: #fff;

        .fa-caret-down {
            margin-left: 1vw;
        }
    }
}


/****************** search ******************/
.search {
    width: 100%;
    height: 13vw;

    .search-fixed-top {
        width: 100%;
        height: 13vw;
        background-color: #0097FF;
        display: flex;
        justify-content: center;
        align-items: center;

        .search-box {
            width: 90%;
            height: 9vw;
            background-color: #fff;
            border-radius: 2px;

            display: flex;
            justify-content: center;
            align-items: center;

            font-size: 3.5vw;
            color: #AEAEAE;
            font-family: "宋体";
            /*此样式是让文本选中状态无效*/
            user-select: none;

            .fa-search {
                margin-right: 1vw;
            }

        }
    }
}




/****************** 横幅广告部分 ******************/
.banner {
    /**
* 设置容器宽度95%，然后水平居中，这样两边留白; 
* 这里不能用padding，因为背景图片也会覆盖padding
*/
    width: 95%;
    margin: 0 auto;
    height: 29vw;

    /*此三个样式组合，可以保证背景图片充满整个容器*/
    background-image: url(@/assets/img/index_banner.png);
    background-repeat: no-repeat;
    background-size: cover;

    box-sizing: border-box;
    padding: 2vw 6vw;

    h3 {
        font-size: 4.2vw;
        margin-bottom: 1.2vw;
    }

    p {
        font-size: 3.4vw;
        color: #666;
        margin-bottom: 2.4vw;
    }

    a {
        font-size: 3vw;
        color: #C79060;
        font-weight: 700;
    }
}



/****************** 超级会员部分 ******************/
.supermember {
    /*这里也设置容器宽度95%，不能用padding，因为背景色也会充满padding*/
    width: 95%;
    margin: 0 auto;
    height: 11.5vw;
    background-color: #FEEDC1;
    margin-top: 1.3vw;
    border-radius: 2px;
    color: #644F1B;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.supermember .left {
    display: flex;
    align-items: center;
    margin-left: 4vw;
    user-select: none;
}

.supermember .left img {
    width: 6vw;
    height: 6vw;
    margin-right: 2vw;
}

.supermember .left h3 {
    font-size: 4vw;
    margin-right: 2vw;
}

.supermember .left p {
    font-size: 3vw;
}

.supermember .right {
    font-size: 3vw;
    margin-right: 4vw;
    cursor: pointer;
}


</style>